<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width:80%;
            height: 450px;
            border:1px solid #ccc;
            margin: 20px auto;;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script src="./lib/echarts.min.js"></script>
<script src="./theme/westeros.js"></script>
<script>
    const box=document.querySelector('#box')
    //初始为echarts图表对象
    const myChart=echarts.init(box)

    //配置图表对象
    const options={
        title:{
            text:'Echarts深入',
           // subtext:'Echarts第二节'
        },
        //鼠标提示
        tooltip:{},
        legend:{
            data:['销量','品种','销量趋势','男女性别比']
        },
        //x轴
        xAxis:{
            data:['水果','服装','数码','玩具']
        },
        //y轴 yAxisIndex:0,1
        yAxis:[{
        
            min:0,
            max:1000,
            axisLabel:{
               // color:"#f00"
            },
            
            axisLine:{
                show:true,
                lineStyle:{
                //color:"#00f"
            },
            }
        },{
            min:0,
            max:120,
            splitLine:{
                show:false,
            }
        }],
        //系列--映射图
        series:[
            {
               name:'销量',
               type:'bar',
               barWidth:60,
               data:[100,200,140,500] 
            },
            {
               name:'品种',
               type:'line',
               //barWidth:60,
               yAxisIndex:1,
               data:[10,20,40,50] 
            },
            {
                name:'销量趋势',
                type:'line',
                data:[240,620,560,820],
                smooth:true,
               // areaStyle:{
                  //  color:'#f00'
               // }
            },
            
            // {
            //     name:'男女性别比',
            //     type:"pie",
            //     center:['90%','20%'],
            //     radius:['0%','20%'],
            //     data:[510,530]
            // }
        ]
    }

    //渲染图表
    myChart.setOption(options)



</script>
</html>